<template>
  <div>
    <AForm :model="searchFrom" class="erp-search-form">
      <ARow class="grid-demo" :gutter="10">
        <AFormItem hide-label>
          <ARangePicker
            v-model="searchFrom.dates"
            mode="month"
            :placeholder="['开始月份', '结束月份']"
            value-format="YYYY-MM-DD"
            :allow-clear="false"
          />
        </AFormItem>
      </ARow>
    </AForm>
    <ACard>
      <div class="erp-mb-10 w100 erp-search-btn-box">
        <ASpace>
          <AButton type="primary" @click="onSearch">
            <template #icon>
              <icon-search />
            </template>
          </AButton>
          <ATooltip content="清空筛选项" position="top">
            <AButton type="dashed" @click="onReset">
              <template #icon>
                <icon-refresh />
              </template>
            </AButton>
          </ATooltip>
        </ASpace>
        <!-- <ASpace>
          <AButton type="primary" @click="onExport('table')">导出</AButton>
        </ASpace> -->
      </div>
      <ATable :pagination="false" :data="tableData" :bordered="{ cell: true }" column-resizable>
        <template #columns>
          <ATableColumn title="序号" :width="65" align="center"> </ATableColumn>
          <ATableColumn title="项目名称" :width="100" align="center">
            <template #cell="{ record }">
              {{ record.purchaseType ?? record.supplierName }}
            </template>
          </ATableColumn>
          <ATableColumn title="金额" data-index="rowIndex" :width="65" align="center">
            <ATableColumn
              v-for="(item, index) in times"
              :key="index"
              :title="
                dayjs(searchFrom.startDate)
                  .add(item - 1, 'month')
                  .format('YYYY年M月')
              "
              data-index="totalAmt"
              :width="120"
              align="center"
            >
              <template #cell="{ record }">
                <div>{{ record.itemDetailList[index] }}</div>
              </template>
            </ATableColumn>
            <ATableColumn title="合计" data-index="totalAmt" :width="100" align="center">
              <template #cell="{ record }">
                <div>{{ record.totalAmt }}</div>
              </template>
            </ATableColumn>
          </ATableColumn>
          <!-- <ATableColumn title="备注" data-index="" :width="65" align="center">
            <template #cell="{ record, rowIndex }">
            </template>
          </ATableColumn> -->
        </template>
      </ATable>
    </ACard>
  </div>
</template>

<script lang="ts" setup>
import {
  FinancePurchaseTypeStatRes,
  FinancePurchaseTypeStatSearch,
  getFinancePurchaseTypeStat
} from '@renderer/api/financialSheet'
import dayjs from 'dayjs'

const searchFrom = ref<FinancePurchaseTypeStatSearch>({
  dates: [
    dayjs().startOf('year').format('YYYY-MM-01'),
    dayjs().endOf('month').format('YYYY-MM-DD')
  ],
  startDate: '',
  endDate: ''
})
const tableData = ref<FinancePurchaseTypeStatRes[]>([])
const times = ref<number[]>([])

onMounted(() => {
  getTableData()
})

async function getTableData() {
  const [createdStartDate, createdEndDate] = searchFrom.value.dates! || []
  datesChange()
  searchFrom.value.startDate = createdStartDate
  searchFrom.value.endDate = dayjs(createdEndDate).endOf('month').format('YYYY-MM-DD')
  const res = await getFinancePurchaseTypeStat({ ...searchFrom.value })
  tableData.value = res.data.list.map((item) => {
    item.children = item.itemList
    return item
  })
}

function onSearch() {
  getTableData()
}
function onReset() {
  searchFrom.value = {
    dates: [
      dayjs().startOf('year').format('YYYY-MM-01'),
      dayjs().endOf('month').format('YYYY-MM-DD')
    ],
    startDate: '',
    endDate: ''
  }
  getTableData()
}

const datesChange = () => {
  const arrNum =
    dayjs(searchFrom.value.dates[1]).diff(dayjs(searchFrom.value.dates[0]), 'month') + 1
  times.value = Array.from({ length: arrNum }, (_, i) => i + 1)
}
</script>
<style lang="less" scoped>
.erp-search-btn-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
